<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Login Demo</title>
<script type="text/javascript">
function debug(msg) {
    var msgDiv = document.getElementById("msgDiv");
    msgDiv.innerHTML = msg;
}
</script>
</head>
<body>

<div id="some_div">
  <!-- loginbox -->
  <div id="loginBox" style="border: 1px solid black;">
    <div id="form_mock">
      <label for="username">Username:</label><input id="username" type="text" name="username" value="" /><br />
      <label for="password">Password:</label><input id="password" type="password" name="password" value="" /><br />
      <button id="signIn" onclick="debug('success!');">Sign In</button>
    </div>
    <div id="helpBox" onclick="debug('helpBox');" style="background-color: lightblue;">
      <div><strong>Help Box</strong></div>
      <div id="link_baidu"><a href="http://www.baidu.com">Baidu</a></div>
      <div id="link_google"><a href="http://www.google.com">Google</a></div>
    </div>
  </div>
</div>

<div id="msgDiv" style="height: 100px; background-color: yellow;"></div>
</body>
</html>